import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Timeline, Button, Pagination, Space } from 'antd';
import DrawerCondition from '@/components/DrawerCondition';
import PopImgShow from '@/components/PopImgShow';
import OtherUpload from '@/components/DescriptionsCondition/OtherUpload';
import TableDataBlock from '@/components/TableDataBlock';
import ImagePreviewGroup from '@/components/DescriptionsCondition/ImagePreviewGroup';
const SetForm = (props) => {
  const { dispatch, visible = {}, id, hideFlag: showHide } = props;
  const [list, setList] = useState([])
  const [total, setTotal] = useState(0)
  const [params, setParams] = useState({
    page: 1, limit: 5
  })
  useEffect(() => {
    fetchData()
  }, [params])
  const fetchData = () => {
    dispatch({
      type: 'subscriber/fetchFollowUp',
      payload: {
        ...params,
        hideFlag: showHide,
        organizationUserId: id,
      },
      callback: (e, total) => {
        setList(e)
        setTotal(total)
      },
    });
  }
  const hideFetch = (hideFlag, o) => {
    dispatch({
      type: 'weCom/fakeSetHideFlag',
      payload: {
        hideFlag: hideFlag,
        id: o
      },
      callback: (e, total) => {
        fetchData()
      },
    });
  }
  const filterList = (list) => {
    return list.map((item) => {
      const { stageInfo = {}, nextFollowUpTime, hideFlag, content, images, attachment, createTime, followUpQuestionType, followUpStatus, hesitateReason, organizationAdminName, stage } = item;
      return (
        <Timeline.Item color="gray">
          <div style={{ display: 'flex', alignItems: 'flex-start', lineHeight: 1.5 }}>
            <div style={{ width: 280 }}>
              <span>{createTime}</span>
            </div>
            <div>
              <Space wrap>
                <span>跟进人:{organizationAdminName}</span>
                <span>{stageInfo.stageName ? `${stageInfo.stageName}-跟进内容:` : '编辑信息:'}</span>
                <span>{content}</span>
                {followUpStatus && (
                  <span>
                    跟进状态：
                    {followUpStatus}
                  </span>
                )}
                {hesitateReason && (
                  <span>
                    犹豫原因：
                    {hesitateReason}
                  </span>
                )}

                {followUpQuestionType && (
                  <span>
                    问题类型：
                    {followUpQuestionType}
                  </span>
                )}
                {nextFollowUpTime && <span>下次跟进时间:{nextFollowUpTime}</span>}
              </Space>
            </div>

          </div>
          {images && (
            <p>
              图片：
              <br />
              <ImagePreviewGroup url={images}></ImagePreviewGroup>
            </p>
          )}
          {attachment && (
            <p>
              附件：
              <br />
              <OtherUpload url={attachment}></OtherUpload>
            </p>
          )}
          {showHide !== '0' && <div>
            <Button onClick={() => {
              hideFetch(hideFlag === '1' ? '0' : '1', item.id)
            }} type='link'>
              {hideFlag === '1' ? '显示' : '隐藏'}
            </Button>
          </div>}
        </Timeline.Item>
      );
    });
  };
  return (
    <div>
      <Timeline direction="vertical">{filterList(list)}</Timeline>
      <Pagination onChange={(e) => {
        setParams({
          page: e,
          limit: 5
        })
      }} pageSize={5} current={params.page} total={total} />
    </div>

  );
};

export default connect(({ loading }) => ({
  loading: loading.effects['subscriber/fetchFollowUp'],
}))(SetForm);
